<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath %>">
<title>订单管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%-- 引用layui.css --%>
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/common.css" />

</head>
<body>
	<div class="ibox">
		<div class="ibox-content bodycss">
			<!-- 表单搜索 开始 -->
		 	<section class="panel panel-padding ">
			<form class="layui-form layui-form-pane form-search"
				onsubmit="return false" method="get">
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">订单号</label>
					<div class="layui-input-inline">
						<input name="orderSn" id="orderSn" value="" placeholder="请输入订单号"
							class="layui-input">
					</div>
				</div>	
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">用户ID</label>
					<div class="layui-input-inline">
						<input name="userId" id="userId" value="" placeholder="请输入用户id"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">用户名称</label>
					<div class="layui-input-inline">
						<input name="userName" id="userName" value="" placeholder="请输入用户名"
							class="layui-input">
					</div>
				</div>				
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">订单状态</label>
					<div class="layui-input-inline" >
					  <div  style="width:150px">
						<select name="orderState" id="orderState" > <!-- 订单状态：0:已取消;10(默认):待确认;20:已确认;30:已配货;40:已发货;50:已收款;60:已退货 -->
							<option value="">请选择</option>
							<option value="0">已取消</option>
							<option value="10">待确认</option>
							<option value="20">已确认</option>
							<option value="30">已配货</option>
							<option value="40">已发货</option>
							<option value="50">已收款</option>
							<option value="60">已退货</option>
						</select>
                      </div>
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<button class="layui-btn layui-btn-primary" lay-submit lay-filter="seach">
						<i class="layui-icon"></i> 搜 索
					</button>
				</div>
			</form>
			</section>
			<!-- 表单搜索 结束 -->
			<section class="panel panel-padding ">
				<div class="ibox-toolbar">
					<button id="exportExcellButton" data-modal="" data-title="导出Excel"class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe667;</i> 导出Excel方式一</button>	
					<button class="layui-btn layui-btn-sm" id="getCheckData" >导出Excel方式二</button>
				</div>
			<table class="layui-table"
				lay-data="{
	                        id: 'menuTeble',
	                        width:'auto',
	                        url:'order/querryOrder.do',
	                        page:true,
	                        even:true,
	                        skin:'row',
	                        limits:[10,20,30,40,50],
	                        limit:10,
							method:'post'                      
	                        }"
				lay-filter="popedomLay" id = "dataTable">
				<!-- 需要将默认的请求的方式改变一下，改为post即可 -->
				<thead>
					<tr>
						<th lay-data="{checkbox:true,disabledKey:'check_status',disabledKeyValue:'1,2'}"></th>
						<th lay-data="{type:'numbers', width:50}">序号</th>
						<!-- <th lay-data="{field:'orderId', width:120,align:'center'}">订单id</th> -->
						<th lay-data="{field:'orderSn', width:200,align:'center'}">订单编号</th>
						<th lay-data="{field:'userId', width:120,align:'center'}">用户id(tvn号)</th>
						<th lay-data="{field:'userName', width:200,align:'center'}">用户姓名</th>
						<th lay-data="{field:'orderState', width:120,align:'center',templet:'#m_type'}">订单状态</th>
						<th lay-data="{fixed: 'right', width:350, align:'center', toolbar: '#popedomBar'}">操作</th>
					</tr>
				</thead>
			</table>
			</section>
		</div>
	</div>
	
	<script type="text/html" id="m_type">	
	    {{#  if(d.orderState == "0") {  }}
			<font color="#00ff00">已取消</font>
		{{#  } else if(d.orderState == "10") {  }}
			<font color="#ff0000">待确认</font>
         {{#  } else if(d.orderState == "20") {  }}
			<font color="#ff0000">已确认</font>
		{{#  } else if(d.orderState == "30") {  }}
			<font color="#ff0000">已配货</font>
		{{#  } else if(d.orderState == "40") {  }}
			<font color="#ff0000">已发货</font>
		{{#  } else if(d.orderState == "50") {  }}
			<font color="#ff0000">已收款</font>
		{{#  } else if(d.orderState == "60") {  }}
			<font color="#ff0000">已退货</font>
		{{#  }  }}
    </script>
	<script type="text/html" id="popedomBar">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel" >订单发货</a>
			<a class="layui-btn layui-bg-cyan layui-btn-xs"  lay-event="editPw" >取消订单</a>
    </script>
    <script type="text/javascript" src="<%=basePath%>js/layui/layui.js"></script>
	<script type="text/javascript">
	layui.config({ base: "<%=basePath%>/js/common/"}).use(["common", "element", "layer", "table", "jquery"], function(){
			var elem = layui.element;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var $ = layui.jquery;
			layui.common.init();			
			/**
			 * 监听刷新表格
			 */
			form.on('submit(seach)', function(data){
				// layer.msg(JSON.stringify(data.field));
				table.reload('menuTeble', {
					where: data.field,
				});
				return false;
			});
			
			
			//监听行事件
			table.on('tool(popedomLay)',function(obj){
				var data = obj.data;
				var even = obj.event;
				var id = data.orderId;
				console.log(id);
				if(even == "cancel"){//用来判断使用具体的哪一个事件
					$.ajax({
						url : "${pageContext.request.contextPath}order/updateOrderOne.do",
						method : "post",
						data : {
							"id" : id
						},
						success : function (data){
							table.reload('menuTeble',{
								where : data.field
							})
						}
					})
				}else if(even == "editPw"){
				   $.ajax({
						url : "${pageContext.request.contextPath}order/updateOrderTwo.do",
						method : "post",
						data : {
							"id" : id
						},
						success : function (data){
							table.reload('menuTeble',{
								where : data.field
							})
						}
					})
				}
			})
	    //导出Excel方法一
	    $("#exportExcellButton").on("click",function(){
	       	layer.load(1,{time:1000});
	       	window.location.href = "order/exportExcell.do?orderSn="+$("#orderSn").val()+"&userId="+$("#userId").val()+"&userName="+$("#userName").val()+"&orderState="+$("#orderState").val();
	    });
	    //导出Excel方法二
	    var active = {
		    	getCheckData: function(){
	    		  var checkStatus = table.checkStatus('menuTeble'),
	    		  data = checkStatus.data;
		   		}
		    };
	    $('#getCheckData').on('click', function(){
			 active.getCheckData();
			  var checkStatus = table.checkStatus('menuTeble');
			  var data = checkStatus.data;
			  var nadate = JSON.stringify(data);
			  	window.location.href = "order/exportExcellNew.do?data="+nadate;//这样从前台传输的数据格式就是json格式的String类型数据
			    console.log(data);
				/*  $.ajax({
				 	url : "${pagecontext.request.contextPath}order/exportExcellNew.do",
				 	method : "post",
			 		dataType : "json",
			 		contentType : "application/json;charset=UTF-8",
			 		data : JSON.stringify(data),
			 		success : function (data){
			 		}
				 })  */
			});
	});
</script>
</body>
</html>
